<template>
  <div>
    <h3>发送请求</h3>
    <button @click="getTodo">发送请求</button>
    <div>
      <h4>待办事项列表</h4>
      <div v-for="(item, index) in todos" :key="index">
        <b>userId:</b> {{ item.userId }} <b>id:</b> {{ item.id }} <b>title:</b> {{ item.title }} <b>completed:</b> {{ item.completed }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import http from '../api/request'
type Todo = {
  id: number
  userId: number
  title: string
  completed: boolean
}

const todos = ref([] as Todo[])

const getTodo = () => {
  // 这里需要指定类型
  // 指定返回的数据类型为 Todo
  http.get<Todo>('/todos/1')
    .then(res => {
      todos.value.push(res.data)
    })
}
</script>

<style>

</style>